<script setup lang="ts">
import { ref } from "vue";
import { EditorBase } from "./components";
import Drawer from "./components/Drawer.vue";

// 定义子组件实例的类型
interface ChildInstance {
  open: () => void;
}
// 创建 ref 并指定子组件的类型
const childRef = ref<ChildInstance | null>(null);

// 定义一个函数来调用子组件的方法
const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.open(); // 调用子组件暴露的方法
  }
};
defineOptions({
  name: "Editor"
});
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <el-button type="primary" @click="callChildMethod">发布</el-button>
    </template>
    <EditorBase />
    <!-- 发布弹窗 -->
    <Drawer ref="childRef" />
  </el-card>
</template>

<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  padding-left: 10px;
}
</style>
